<template>
<!--  开始页-->
  <div>
    <button @click="start">开始任务</button>
  </div>
</template>

<script>
import {defineComponent, ref} from "vue";
import {useRouter} from 'vue-router'

export default defineComponent({
  name: "Start",
  setup(){
    let router = useRouter() // router 全局路由对象
    console.log('全局路由对象:', router)
    let name = ref('hugo')
    let num = ref(8)
    let obj = ref({msg: 'start'})

    let start = () => {
      // push 如果传的是对象形式，就可以传递参数
      // push 里面还可以传入 name(路由的名字）

      // query 传参 会在 url 显示，是 get 操作
      // query 传参 path: 和 name: 都可以
      router.push({
        name: 'Home',

        // path: '/home',
        // query: {
        //   name: name.value,
        //   num: num.value,
        //   obj: JSON.stringify(obj),
        // },

        // params 传参 没有在 url 显示参数,是 post 操作
        // params 传参只能用 name:
        params: {
          name: name.value,
          num: num.value,
          obj: JSON.stringify(obj.value),
        },
      })
    }

    return{
      start,
      name,
      num,
      obj
    }
  }
})
</script>

<style scoped>

</style>
